<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight" style="    display: flex;
    justify-content: space-between;">
          <div style="display:flex;justify-content: space-between;">
            <div class="report_header_left"></div>
            <div style="display: flex;">
              <div :style="{'height': (headerType==false ? '41px':'')}"
                   style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;justify-items: flex-end">
                <div class="report_header_date">
                  <queryDate  queryTItle="送达日期" @queryDateClick='queryDateClick'></queryDate>
                </div>
                <div class="report_header_query">
                  <queryShop  queryTItle="门店" @queryShopClick="queryShopClick"></queryShop>
                </div>
                <div class="report_header_query">
                  <queryEmployee queryTItle="发货员" @queryEmployeeClick="queryEmployeeClick"></queryEmployee>
                </div>
                <div class="report_header_query">
                  <queryMember queryTItle="客户"  @queryMemberClick="queryMemberClick"></queryMember>
                </div>
                <!--<div class="report_header_query">-->
                <!--<queryProduct @queryProductClick="queryProductClick"></queryProduct>-->
                <!--</div>-->
                <!--<div class="report_header_query">-->
                <!--<queryProductCategory @queryProductCategoryClick="queryProductCategoryClick"></queryProductCategory>-->
                <!--</div>-->
              </div>
            </div>
          </div>
          <div style="display:flex">
            <el-button style="margin-left: 10px;height: 32px;margin-top: 7px;border-top-left-radius: 4px !important;border-right: 1px solid rgb(102, 177, 255);
                border-bottom-left-radius: 4px !important;border-top-right-radius: 4px !important;border-bottom-right-radius: 4px !important;"
                       size="small" type="primary"
                       @click="loadReport">查询
            </el-button>
            <!--<div @click="chooseClick"-->
            <!--style="width: 25px;height: 32px;background-color: #1890ff;margin-top: 7px;display: flex;justify-content: center;-->
            <!--border-top-left-radius: 0px !important;-->
            <!--border-bottom-left-radius: 0px !important;border-top-right-radius: 4px !important;border-bottom-right-radius: 4px !important;align-items: center;">-->
            <!--<i style="font-size: 15px;color: white;"-->
            <!--:class="[headerType == false?'el-icon-arrow-down':'el-icon-arrow-up']"></i>-->
            <!--</div>-->
            <ExportList2Excel style='margin-top: 5px;margin-left:20px' ref="exportList2Excel"
                              @handleExport="handleExport" name="导出"/>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :span-method="totalLine" ref="table" :height="curHeight" :data="tableData" border style="width: 100%;"
                  @row-click="clickTr">
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{ scope.$index == tableData.length - 1 ? '总计' : scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" header-align="center" :show-overflow-tooltip="true" width="250">
          </el-table-column>
          <el-table-column prop="sn" label="货号" header-align="center" :show-overflow-tooltip="true" width="100">
          </el-table-column>
          <el-table-column prop="spec" width="120" header-align="center" :show-overflow-tooltip="true" label="规格">
          </el-table-column>
          <el-table-column align="center" prop="unit" header-align="center" width="50" label="单位">
          </el-table-column>
          <el-table-column align="right" prop="quantity" label="发货数量" header-align="center" width="80">
          </el-table-column>
          <el-table-column align="right" width="120" header-align="center" prop="subTotal" label="发货金额"></el-table-column>
          <el-table-column align="right" prop="returnQuantity" label="退货数量" header-align="center" width="80">
          </el-table-column>
          <el-table-column align="right" width="120" header-align="center" prop="returnSubTotal" label="退货金额"></el-table-column>
          <el-table-column align="center" label="查看详情">
            <template slot-scope="scope">
              <div class="justify_right shop_Height" @click="clicklook(scope.row)">
                <a class="details_Title">明细详情</a>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="loadReport"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import supplierTable from '../../components/SupplierTable/supplierList'
  import memberTable from '@/components/MemberTable/index'
  import productTable from '@/components/ProductList/productList'
  import elDragDialog from '@/directive/el-drag-dialog'
  import querySupplier from '@/components/Query/querySupplier'
  import queryEmployee from '@/components/Query/queryEmployee'
  import queryProduct from '@/components/Query/queryProduct'
  import queryProductCategory from '@/components/Query/queryProductCategory'
  import queryDate from '@/components/Query/queryDate'
  import queryShop from '@/components/Query/queryShop'
  import queryMember from '@/components/Query/queryMember'
  import {list as shopList} from '@/api/shop'
  import ExportList2Excel from "@/components/ExportList2Excel";
  import Pagination from '@/components/Pagination';
  import OfficeDialog from '@/components/OfficeDialog/index'
  import CategoryDialog from '@/components/CategoryDialog/index'
  import {shippingCountproductList, shippingsummary} from '@/api/report'
  import {employeeCountList} from '@/api/report'
  import utils from '@/utils/utils'
  import {dateFormatter} from '@/filters'
  import {list as memberList} from '@/api/member'
  import {list as productList} from '@/api/product'
  import {list as supplierList} from '@/api/supplier'

  export default {
    name: 'supplyCountReport-list',
    data() {
      return {
        printing: 5000,
        productCategoryName: '',
        supplierName: '',
        employeeName:'',
        shopname:'',
        membername:'',
        productName: '',
        proname:'',
        query: {
          shopId: '',
          supplierId: '',
          employeeId: '',
          memberId: '',
          productCategory: '',
          endDate: '',
          productId: '',
          beginDate: '',
        },
        summaryForm: {},
        memberName: '',
        orderVisible: false,
        fullscreenLoading: false,
        supplierVisible: false,
        memberTableVisible: false,
        weChatPay: 0,
        aliPay: 0,
        memberPay: 0,
        cashPay: 0,
        bankPay: 0,
        waterPay: 0,
        pointPay: 0,
        matchPointPay: 0,
        reportListId: '',
        headerType: false,
        date: [],
        suppierIdOptions: [],
        productOptions: [],
        memberIdOptions: [],
        shopIdOptions: [],
        officeName: '',
        pickerOptions: {//时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        tableData: [],
        curHeight: null,
        pageSize: 20,
        total: 0,
        pageNum: 1,
      }
    },
    directives: {elDragDialog},
    components: {
      Pagination,
      OfficeDialog,
      CategoryDialog,
      ExportList2Excel,
      productTable,
      memberTable,
      supplierTable,
      queryEmployee,
      queryProductCategory,
      queryShop,
      queryProduct,
      querySupplier,
      queryDate,
      queryMember
    },
    updated() {
      this.$nextTick(() => {
        this.$refs['table'].doLayout();
      })
    },
    created() {
      this.getShop()
    },
    mounted() {
      this.comeIn();
      this.beforeMount();
    },
    methods: {
      clickTr(row, event, column) {
        console.log(row);
        this.clicklook(row)
      },
      clicklook(item) {
        console.log(this.supplierName)
        this.$router.push({
          path: '/supplyCountReport/detailslist',
          query: {
            id: item.id,
            beginDate: this.query.beginDate,
            endDate: this.query.endDate,
            shopId: this.query.shopId,
            shopname:this.shopname,
//          supplierId: this.query.supplierId,
//          supplierName:this.supplierName,
            employeeId: this.query.employeeId,
            employeerName:this.employeeName,
            memberId: this.query.memberId,
            membername:this.membername,
//          productCategory: this.query.productCategory,
            productId: item.productId,
            proname:item.name,
            // proname:this.proname,
          }
        })
      },
      queryProductCategoryClick(data) {
        this.query.productCategory = data.productCategoryId
      },
      queryShopClick(data) {
        this.query.shopId = data.shopId
        this.shopname = data.name
      },
      queryProductClick(data) {
        this.query.productId = data.productId
        this.proname = data.proname
      },
      querySupplierClick(data) {
        this.query.supplierId = data.supplierId
        this.supplierName = data.suppName
      },
      queryEmployeeClick(data) {
        console.log(data);
        this.query.employeeId = data.employeeId
        this.employeeName = data.name
      },
      queryDateClick(data) {
        this.query.beginDate = data.beginDate
        this.query.endDate = data.endDate
      },
      queryMemberClick(data) {
        this.query.memberId = data.memberId
        this.membername = data.membername
      },
      chooseClick() {
        this.headerType = !this.headerType
        this.comeIn()
      },
      clearProduct() {
        this.query.productId = ''
      },
      changeProduct(data) {
        this.productName = data.name
        this.query.productId = data.id
      },
      clearSupp() {
        this.query.supplierId = ''
      },
      clearMember() {
        this.query.memberId = ''
      },
      doubleSupplier(data) {
        this.supplierName = data.name
        this.query.supplierId = data.id
        this.supplierVisible = false
      },
      supplierClose() {
        this.supplierVisible = false
      },
      changeSupp(data) {
        this.supplierName = data.name
        this.query.supplierId = data.id
      },
      toSearchSupplier() {
        this.supplierVisible = true
      },
      querySuppier(query) { // 查询供应商
        this.suppierIdOptions = []
        supplierList({name: query}).then(res => {
          res.data.data.forEach((option, index) => {
            this.$set(this.suppierIdOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      getSuppierList(data) { // 加载供应商
        console.log(data)
        supplierList().then(res => {
          res.data.data.forEach((option, index) => {
            this.$set(this.suppierIdOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      addProductClick(data) {
        if (data.length > 1) {
          this.$message({
            message: '只能查询一个商品',
            offset: 120,
            center: true
          })
        } else if (data.length == 1) {
          this.query.productId = data[0].id
          this.productName = data[0].name
          this.orderVisible = false;
        }
      },
      toAddProduct() {
        this.orderVisible = true
      },
      orderClose() {
        this.orderVisible = false
      },
      doubleClick(data) {
        this.query.productId = data.id
        this.productName = data.name
        this.orderVisible = false
      },
      queryProduct(query) { // 查询商品
        this.productOptions = []
        productList({keyword: query}).then(res => {
          res.data.data.forEach((option, index) => {
            this.$set(this.productOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      getProductList(data) { // 加载商品
        console.log(data)
        productList().then(res => {
          res.data.data.forEach((option, index) => {
            this.$set(this.productOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      changeMember(data) {
        this.memberName = data.name
        this.query.memberId = data.id
      },
      memberDouble(data) {
        this.memberName = data.name
        this.query.memberId = data.id
        this.memberTableVisible = false
      },
      memberTableClose() {
        this.memberTableVisible = false
      },
      toSearchMember() {
        this.memberTableVisible = true
      },
      queryMember(query) { // 搜索客户
        console.log(query)
        this.memberIdOptions = []
        memberList({keyword: query}).then(res => {
          res.data.data.forEach((option, index) => {

            this.$set(this.memberIdOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      getMemberList() { // 加载客户
        memberList().then(res => {
          res.data.data.forEach((option, index) => {

            this.$set(this.memberIdOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      claerName() {
        this.query.productCategoryId = ''
      },
      //下载模板的函数
      handleExport() {
        let _this = this
        var loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        //要导出函数携带的参数
        //要导出函数携带的参数
        let data = {}
        data.tHeader = ["商品名称",'货号',  "规格", "单位", "发货数量", "发货金额", '退货数量', "退货金额"]
        data.filterVal = ["name",'sn',  "spec", "unit", "quantity", "subTotal", 'returnQuantity', "returnSubTotal"]
        data.filename = "发货汇总列表";
        var param = new URLSearchParams()
        param.append('endDate', this.query.endDate)
        param.append('startDate', this.query.beginDate)
        param.append('shopId', this.query.shopId)
        param.append('employeeId', this.query.employeeId)
        // param.append('supplierId', this.query.supplierId)
        param.append('productId', this.query.productId)
        param.append('memberId', this.query.memberId)
        param.append('pageSize', this.printing)
        param.append('pageNum', this.pageNum)
        param.append('productCategoryId', this.query.productCategory)
        param.append('shippingMethod', 0)
        shippingCountproductList(param).then(res => {
          data.list = res.data.data
          shippingsummary(param).then(response => {
            response.data.name = '合计'
            data.list.push(response.data)
            _this.$refs.exportList2Excel.handleDownload(data);
            loading.close();
          })
          if (data.list.length == this.printing) {
            this.pageNum++
            console.log(this.pageNum);
            this.handleExport()
          } else {
            return;
          }

        }).catch(error => {
          _this.$refs.exportList2Excel.unlockLoading()
          loading.close();
          console.log('error!!')
        })
        _this.$refs.exportList2Excel.handleDownload(data);
      },
      loadReport() {
        var param = new URLSearchParams()
        param.append('endDate', this.query.endDate)
        param.append('startDate', this.query.beginDate)
        param.append('employeeId', this.query.employeeId)
        param.append('shopId', this.query.shopId)
        param.append('supplierId', this.query.supplierId)
        param.append('productId', this.query.productId)
        param.append('memberId', this.query.memberId)
        param.append('pageSize', this.pageSize)
        param.append('pageNum', this.pageNum)
        param.append('productCategoryId', this.query.productCategory)
        param.append('shippingMethod', 0)
        shippingCountproductList(param).then(res => {
          // res.data.data.forEach(item => {
          //   if (item.matchPointReceived == null) {
          //     item.matchPointReceived = 0
          //   }
          // })
          this.tableData = res.data.data
          this.total = res.data.total
          shippingsummary(param).then(response => {
            this.tableData.push(response.data)
            // if (response.data[0] != null && response.data.length > 0) {
            //   this.tableData.push(response.data[0])


            // }
          })
        })
      },
      categoryDialogConfirm(val) {
        this.query.productCategory = val.id
        this.productCategoryName = val.name
      },
      officeDialogConfirm(val) {
        this.officeName = val.name
        this.query.officeId = val.id
      },
      categoryDialogShow() {
        this.$refs.categoryDialog.show()
      },
      officeDialogShow() {
        this.$refs.officeDialog.show()
      },
      getShop() { // 获取仓库
        shopList().then(res => {
          res.data.data.forEach((option, index) => {
            const obj = {
              value: option.id,
              label: option.name
            }
            this.$set(this.shopIdOptions, index, obj)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      changeTime(data) {
        if (data != null && data.length > 1) {
          this.query.beginDate = data[0]
          this.query.endDate = data[1]
        } else {
          this.query.endDate = ''
          this.query.beginDate = ''
        }
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            var headerHeight = _this.$refs.headerHeight.clientHeight
            _this.curHeight = h - 174 - headerHeight//减去页面上固定高度height
          })();
        };
      },
      comeIn() {
        console.log('222')
        var _this = this
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        var headerHeight = _this.$refs.headerHeight.clientHeight
        this.curHeight = h - 174 - headerHeight//减去页面上固定高度height
      },
      totalLine({
                  row,
                  column,
                  rowIndex,
                  columnIndex
                }) {
        var _this = this
        if (rowIndex === _this.tableData.length - 1) {
          if (columnIndex === 0) {
            return {
              rowspan: 1,
              colspan: 5
            };
          } else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  }
</script>

<style scoped>
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  .details_Title {
    font-size: 14px;
    color: #409EFF;
  }

  .justify_right {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /deep/ .el-header {
           padding: 10px;
           height: 100% !important;
           padding-bottom: 0;
         }

  .justify_right {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .primary {
    margin-left: 10px;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 10px;
  }


  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 130px;
    margin-top: 5px;
  }

  /deep/ .el-button {
           height: 35px;
         }

  .report_header_date {
    box-sizing: border-box;
    margin-left: 10px;
    width: 270px;
    margin-top: 5px;
  }

  .report_footer_box {
    width: 100%;
    border: 1px solid #dfe6ec;
    border-top: none;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: white;
  }

  /deep/ .el-footer {
           padding: 10px;
           padding-top: 0;
         }

  .report_footer_box_title {
    margin-left: 10px;
    font-size: 12px;
    font-weight: bold;
  }

  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }


  /deep/ .el-table--group::after,
         .el-table--border::after,
         .el-table::before {
           background-color: white;
         }

  /deep/ .el-table__body tbody .el-table__row:last-child {
           background-color: #F5F7FA;
         }

  /deep/ .el-main {
           padding: 10px;
           padding-bottom: 0;
         }

  /deep/ .el-table--enable-row-transition .el-table__body td {
           border-bottom: none;
         }

  /deep/ .el-table::before {
           height: 0px;
         }

  /deep/ .el-table--border th {
           background-color: rgba(241, 242, 243, 1);
         }

  /deep/ .pagination-container {
           margin-top: 0 !important;
         }
</style>
